<template>
  <div>
    <div class="code-pre">
      语法：transform：适用于 2D 或 3D 转换的元素<br>
      <span>transform-origin: 转换元素的位置（围绕那个点进行转换），默认（x,y,z）: (50%, 50%, 0)</span>
    </div>
    <el-row gutter="10">
      <CodePre title="transform: rotate(20deg)" :span="6">
        <div class="demo1">
          demo1
        </div>
        <p/>
      </CodePre>
      <CodePre title="transform:translate(20px,10px)" :span="6">
        <h4>transform: rotate(20deg)</h4>
        <div class="demo2">
          demo2
        </div>
        <p/>
      </CodePre>
    </el-row>
  </div>
</template>
<script>
import { CodePre } from '@/components/DemoContainer'
export default {
  components: {
    CodePre
  },
  setup() {
    //
  }
}
</script>
<style lang="less" scoped>
.demo1 {
  width: 140px;
  height: 70px;
  background: purple;
  transform: rotate(20deg);
  color: #fff;
  margin-top: 20px;
  display: inline-block;
}
.demo2 {
  width: 140px;
  height: 70px;
  background: rgb(10, 14, 228);
  transform: translate(20px,10px);
  color: #fff;
  margin-top: 20px;
  display: inline-block;
}
</style>
